/**
 * 博客首页组件
 * 展示网站标题、描述和已发布的博客文章列表
 * 使用服务端渲染获取数据，提供更好的 SEO 和性能
 */

import Header from '@/components/Header';
import BlogCard from '@/components/BlogCard';
import { getBlogPosts } from '@/lib/data';
import { BookOpen, PenTool } from 'lucide-react';

/**
 * 博客首页组件
 * @returns JSX 元素
 */
export default async function Home() {
  // 获取已发布的博客文章
  const posts = await getBlogPosts('published');

  return (
    <div className="min-h-screen bg-background">
      {/* 网站头部导航 */}
      <Header />
      
      <main className="container mx-auto px-4 py-8">
        {/* 英雄区域 - 网站标题和描述 */}
        <section className="text-center py-16">
          <div className="max-w-3xl mx-auto">
            {/* Logo 图标 */}
            <div className="flex justify-center mb-6">
              <div className="p-4 rounded-full bg-primary/10">
                <BookOpen className="h-12 w-12 text-primary" />
              </div>
            </div>
            {/* 主标题 */}
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
              我的博客
            </h1>
            {/* 副标题 */}
            <p className="text-xl text-muted-foreground mb-8">
              分享技术见解，记录学习历程，探索无限可能
            </p>
            {/* 技术栈信息 */}
            <div className="flex justify-center">
              <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                <PenTool className="h-4 w-4" />
                <span>基于 Next.js 15 和 Tailwind CSS 构建</span>
              </div>
            </div>
          </div>
        </section>

        {/* 博客文章列表区域 */}
        <section className="py-12">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-3xl font-bold">最新文章</h2>
            <div className="text-sm text-muted-foreground">
              共 {posts.length} 篇文章
            </div>
          </div>
          
          {/* 文章列表或空状态 */}
          {posts.length === 0 ? (
            <div className="text-center py-16">
              <BookOpen className="h-16 w-16 mx-auto text-muted-foreground/50 mb-4" />
              <h3 className="text-xl font-semibold mb-2">暂无文章</h3>
              <p className="text-muted-foreground">还没有发布任何文章，请稍后再来查看。</p>
            </div>
          ) : (
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {posts.map((post) => (
                <BlogCard key={post.id} post={post} />
              ))}
            </div>
          )}
        </section>
      </main>

      {/* 网站底部 */}
      <footer className="border-t bg-muted/50 py-8 mt-16">
        <div className="container mx-auto px-4 text-center text-muted-foreground">
          <p>&copy; 2024 我的博客. 使用 Next.js 和 Tailwind CSS 构建.</p>
        </div>
      </footer>
    </div>
  );
}
